<template>
  <div>
    <Header></Header>

    <!-- <div class="pl-30 pt-30 rows rowsm" style="cursor: pointer" @click="$router.back()">
        <img src="../../static/img/icon_fh.png" class="w-18 h-18 mr-10" alt="">
        <div class="fs-18 col333">返回上层</div>
    </div> -->
    <div class="titleMian">
      <div class="w100 pl-50 pr-50">
      <div style="text-align: center; font-size: 24px; font-weight: bold;" v-html="title"></div>
      <br/>
      <div style="text-align: center; font-size: 14px; " v-html="info"></div>
      <br/>
      <div class="" v-html="content"></div>
      </div>
    </div>

    <Footer class="mt-80"></Footer>

  </div>
</template>

<script>
import axios from "axios";

export default {
  components: {},
  props: {},
  data() {
    return {
      content:'',
      name:'',
      id:'',
      title:'',
      info:'',
    };
  },
  watch: {},
  computed: {},
  methods: {
    getDetailList() {
      const Axios = axios.create({
        // baseURL: 'http://localhost:8078/'
        baseURL: this.$apiBaseUrl
      });
      if (this.name === "政策资讯") {
        Axios.get('/project/prozczx/listNoAccess?id=' + this.id)
            .then(response => {
              this.content = this.replaceSpacesInText(this.convertClassToStyle(response.data.rows[0].content)
                  .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')).replace(/amp;/g, '')
              // this.content = response.data.rows[0].content;
              this.title = response.data.rows[0].title;
              this.info = `发布者：${response.data.rows[0].nickName} \n 发布时间：
            ${response.data.rows[0].createTime}`;
            })
            .catch(error => {
              console.error('请求失败:', error);
            });
      } else if (this.name === "劳动教育概况" || this.name === "劳动教育动态" || this.name === "劳动教育实践基地") {
        Axios.get('/project/config/listNoAccess?id=' + this.id)
            .then(response => {
              // this.content = response.data.rows[0].content;
              this.content = this.replaceSpacesInText(this.convertClassToStyle(response.data.rows[0].content)
                  .replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')).replace(/amp;/g, '')
              this.title = response.data.rows[0].title;
              this.info = `发布者：${response.data.rows[0].nickName} \n 发布时间：
            ${response.data.rows[0].createTime}`;
            })
            .catch(error => {
              console.error('请求失败:', error);
            });
      }
    },


    convertClassToStyle(html) {
      // 创建一个 DOMParser 实例
      const parser = new DOMParser();
      // 解析 HTML 字符串
      const doc = parser.parseFromString(html, 'text/html');

      // 获取所有带有 class 属性的元素
      const elements = doc.querySelectorAll('[class]');

      elements.forEach(element => {
        // 获取 class 属性的值
        const classList = element.className.split(' ');

        // 根据 class 名称设置相应的 style 属性
        // 这里可以根据实际需要定义样式映射
        const styleMap = {
          'ql-align-justify': 'text-align: justify;',
          'ql-align-center': 'text-align: center;',
          // 添加其他 class 到 style 的映射
        };

        // 将 class 转换为 style
        classList.forEach(className => {
          if (styleMap[className]) {
            element.style.cssText += styleMap[className];
          }
        });

        // 移除 class 属性
        element.removeAttribute('class');
      });
      // 返回转换后的 HTML
      return doc.body.innerHTML;
    },

    replaceSpacesInText(htmlContent) {
      // 使用 DOMParser 将 HTML 字符串解析为 DOM
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlContent, 'text/html');

      // 创建一个 TreeWalker 来遍历文本节点
      const walker = document.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, null, false);

      // 遍历文本节点并替换空格
      while (walker.nextNode()) {
        const textNode = walker.currentNode;
        textNode.nodeValue = textNode.nodeValue.replace(/ /g, '&nbsp;');
      }

      // 返回修改后的 HTML 字符串
      return doc.body.innerHTML;
    }


  },
  created() {
    const name = this.$route.query.name;
    const id = this.$route.query.id;
    this.name = name
    this.id = id
    this.getDetailList()
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.titleMian {
  min-height: calc(100vh - 60px);
  width: 70%;
  border: 1px solid #e6e6e6;
  margin: 20px auto;
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}
::v-deep img {
  width: 100% !important;
  height: auto !important;
}
</style>